import React, { Component,ReactDOM } from 'react';
import {Col} from 'antd';
import style from './chart-shebei.module.css';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from "@antv/data-set";
class SheBei extends Component {
  constructor(props) {
    super(props);
    this.state = {  }
  }
  render() { 
    const { DataView } = DataSet;
    const { Html } = Guide;
    const data = [
      {
        item: "Iphone",
        count: 40
      },
      {
        item: "Android",
        count: 21
      },
      {
        item: "pc",
        count: 21
      },
      {
        item: "未知",
        count: 5
      },
    ];
    let total_count = 0
    for(let i of data){
      total_count += i.count
    }
    const Guide_html = "<div style='color:#8c8c8c;font-size:1.16em;text-align: center;width: 10em;'>总访问量<br><span className='count' style='color:#262626;font-size:20px'>"+ total_count +"</span>台</div>"
    const dv = new DataView();
    dv.source(data).transform({
      type: "percent",
      field: "count",
      dimension: "item",
      as: "percent"
    });
    const cols = {
      percent: {
        formatter: (val) => {
          val = Math.round(val * 100) + "%";
          return val;
        }
      },
    };
    return (
      <Col xs={24} sm={24} md={24} lg={24} xl={8} className={style.check}>
        <div className={style.chart_header}>
          <div className={style.chart_header_title}>
            <span>访问情况</span>
            <p>Access situation</p>
          </div>
        </div>
        <div className={style.chart_div}>
        <Chart
          height={400}
          data={dv}
          scale={cols}
          padding={[30, 60, 30, 30]}
          forceFit
        >
          <Coord type={"theta"} radius={0.75} innerRadius={0.6} />
          <Axis name="percent" />
          <Tooltip
            showTitle={false}
            itemTpl="<li><span style=&quot;background-color:{color};&quot; class=&quot;g2-tooltip-marker&quot;></span>{name}: {value}</li>"
          />
          <Guide>
            <Html
              position={["50%", "50%"]}
              html={Guide_html}
              alignX="middle"
              alignY="middle"
            />
          </Guide>
          <Geom
            type="intervalStack"
            position="percent"
            color="item"
            tooltip={[
              "item*percent",
              (item, percent) => {
                console.log(percent,total_count)
                percent = Math.round(percent * total_count) + "台";
                return {
                  name: item,
                  value: percent
                };
              }
            ]}
            style={{
              lineWidth: 1,
              stroke: "#fff"
            }}
          >
            <Label
              content="percent"
              formatter={(val, item) => {
                return item.point.item + ": " + val;
              }}
            />
          </Geom>
        </Chart>
        </div>
      </Col>
    );
  }
}
 
export default SheBei;